<%- include ../top.html%>
<link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel="stylesheet"/>

<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>

<div class="container" style="margin-top: 20px;">
    <div class="row">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">
                    新闻列表
                </h3>
            </div>
            <div class="panel-body">
                <table id="table" data-click-to-select="true"
                       data-single-select="true">

                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    编辑新闻
                </h4>
            </div>
            <div class="modal-body">
                <form action="/doregister.html" method="post">
                    <div class="form-group">
                        <label for="title">标题：</label>
                        <input type="text" name="title" class="form-control" id="title" placeholder="标题"/>
                    </div>
                    <div class="form-group">
                        <label for="time">时间：</label>
                        <input type="text" name="time" id="time" class="form-control" placeholder="时间"/>
                    </div>
                    <div class="form-group">
                        <label for="des">描 述：</label>
                        <input type="text" name="des" class="form-control" id="des" placeholder="描述"/>
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <textarea id="content" name="content" class="form-control" rows="10"></textarea>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->


<div id="toolbar" class="btn-group">
    <button id="btn_add" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </button>
    <button id="btn_edit" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
    </button>
    <button id="btn_delete" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    </button>
</div>

<script>
    var row_data={};
    $( function() {
        var $table = $( '#table' );

        $table.bootstrapTable( {
            url                : "/news/list-data/1",
            dataType           : "json",
            toolbar            : '#toolbar',    //工具按钮用哪个容器
            striped            : true,      //是否显示行间隔色
            pagination         : true, //分页
            singleSelect       : true,
            check              : 1,
            pageList           : [5, 10, 15, 20],
            pageSize           : 5,
            pageNumber         : 1,
            clickToSelect      : true,    //是否启用点击选中行
            uniqueId           : "id",
            showToggle         : true,     //是否显示详细视图和列表视图的切换按钮
            cardView           : false,     //是否显示详细视图
            detailView         : false,     //是否显示父子表
            sidePagination     : "server",
            onClickRow:function(row,$element){
                row_data=row;
            },
            //data-locale:"zh-US" , //表格汉化
            search             : true, //显示搜索框
            queryParams        : function( params ) {
                return {
                    search: $( ".search .form-control" ).val(),
                    limit : params.limit,
                    offset: params.offset
                };
            },
            showColumns        : true,
            showRefresh        : true,
            minimumCountColumns: 2,
            clickToSelect      : true,
            smartDisplay       : true,
            columns            : [
                {
                    title   : '单选',
                    field   : 'state',
                    checkbox: true
                },
                {
                    title: 'ID',
                    field: 'id'
                },
                {
                    title    : '标题',
                    field    : 'title',
                    formatter: function( value, row, index ) {
                        return "<a target='_blank' href='/news/detail/" + row.id + "'>" + value + "</a>"
                    }
                },
                {
                    title: '开始时间',
                    field: 'time',
                },
                {
                    title    : '操作',
                    field    : 'handle',
                    align    : 'center',
                    formatter: function( value, row, index ) {
                        var e = '<a  href="#" mce_href="#" onclick="edit(\'' + row.id+ '\')">编辑</a> ';
                        var d = ' <a href="#" mce_href="#" onclick="del(\'' + row.id + '\')">删除</a> ';
                        return e + "|" + d;
                    }
                }
            ]
        } );

    } )
    function edit(obj){
        var obj=$('#table').bootstrapTable('getRowByUniqueId', obj);

        if(typeof obj!="underfined"){
            for(var p in obj){
                $("[name="+p+"]" ).val(obj[p]);
            }
        }

        $('#myModal').modal('toggle')
    }
</script>
<%- include ../foot.html%>